<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="status_bar">
    	<!-- 这里是状态栏 -->
    </view>
    <view class="top-tabar">
    	<view class="arrow" @click="returing"></view>
    	<view class="title-tbar">
    		导航
    	</view>
    	<!-- 添加一个空的占位元素保持平衡 -->
    	<view class="placeholder"></view>
    </view>
<view class="total-con">
	<view class="Qer-image">
		<view class="code-er">
			核销码：wE33435V
		</view>
		<image src="/static/uni.png" mode=""></image>
	</view>
    <!-- 维修信息卡片 -->
    <view class="card">
      <view class="section-title">维修信息</view>
      
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">维修单号：</text>
          <text class="info-value">{{ repairInfo.repairNumber }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">维修状态：</text>
          <view class="status-badge" :class="repairInfo.statusClass">
            {{ repairInfo.repairStatus }}
          </view>
        </view>
        
        <view class="info-item">
          <text class="info-label">车主姓名：</text>
          <text class="info-value">{{ repairInfo.ownerName }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">联系方式：</text>
          <text class="info-value">{{ repairInfo.contact }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">维修方式：</text>
          <text class="info-value">{{ repairInfo.repairMethod }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">取车位置：</text>
          <text class="info-value">{{ repairInfo.pickupLocation }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">预约日期：</text>
          <text class="info-value">{{ repairInfo.appointmentDate }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">提交日期：</text>
          <text class="info-value">{{ repairInfo.submitDate }}</text>
        </view>
      </view>
    </view>

    <!-- 分隔线 -->
    <view class="divider"></view>

    <!-- 车辆信息卡片 -->
    <view class="card">
      <view class="section-title">车辆信息</view>
      
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">车辆类型：</text>
          <text class="info-value">{{ vehicleInfo.vehicleType }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">车牌号：</text>
          <text class="info-value">{{ vehicleInfo.plateNumber }}</text>
        </view>
      </view>
      
      <!-- 整车照片 -->
      <view class="photo-section">
        <text class="photo-label">整车照片：</text>
        <view class="photo-list">
          <image 
            v-for="(photo, index) in vehicleInfo.wholeCarPhotos" 
            :key="index"
            :src="photo" 
            class="photo-image"
            mode="aspectFill"
            @click="previewImage(vehicleInfo.wholeCarPhotos, index)"
          />
        </view>
      </view>
      
      <!-- 维修部位照片 -->
      <view class="photo-section">
        <text class="photo-label">维修部位照片：</text>
        <view class="photo-list">
          <image 
            v-for="(photo, index) in vehicleInfo.repairPartPhotos" 
            :key="index"
            :src="photo" 
            class="photo-image"
            mode="aspectFill"
            @click="previewImage(vehicleInfo.repairPartPhotos, index)"
          />
        </view>
      </view>
    </view>

    <!-- 取消预约按钮 -->
    <button class="cancel-btn" @click="handleCancel">取消预约</button>
  </view>
 </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
		onLoad
	} from '@dcloudio/uni-app'


const returing = () => {
		uni.navigateBack()
	}
// 维修信息
const repairInfo = reactive({
  repairNumber: '3535252',
  repairStatus: '进行中',
  statusClass: 'processing',
  ownerName: '张',
  contact: '1993829282',
  repairMethod: '上门取车',
  pickupLocation: '山阳区32号',
  appointmentDate: '2022/11/10 11:00',
  submitDate: '2022/11/08 12:34'
})

// 车辆信息
const vehicleInfo = reactive({
  vehicleType: '大客车',
  plateNumber: '豫J45323',
  wholeCarPhotos: [
    '/static/images/car-whole.jpg',
    '/static/images/car-whole2.jpg'
  ],
  repairPartPhotos: [
    '/static/images/repair-part1.jpg',
    '/static/images/repair-part2.jpg'
  ]
})

// 预览图片
const previewImage = (urls, currentIndex) => {
  uni.previewImage({
    urls: urls,
    current: currentIndex
  })
}

// 取消预约
const handleCancel = () => {
  uni.showModal({
    title: '确认取消',
    content: '您确定要取消本次预约吗？',
    confirmColor: '#FF4757',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: '取消中...'
        })
        
        // 模拟取消操作
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({
            title: '取消成功',
            icon: 'success'
          })
          
          // 更新状态
          repairInfo.repairStatus = '已取消'
          repairInfo.statusClass = 'cancelled'
          
          // 返回上一页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }, 1500)
      }
    }
  })
}

// 页面加载
onLoad((options) => {
  console.log('预约详情页面加载', options)
  
  // 如果有传递参数，可以更新数据
  if (options.repairNumber) {
    repairInfo.repairNumber = options.repairNumber
  }
})

</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.Qer-image{
	background-color: white;
	width: 670rpx;
	height: 300rpx;
	text-align: center;
	margin: 0 auto;
	border-radius: 30rpx;
	padding: 20rpx 0;
}
.Qer-image image{
	width: 200rpx;
	height: 200rpx;
}
.code-er{
	margin-bottom: 20rpx;
}
.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.title-tbar {
		color: white;
		font-size: 36rpx;
		text-align: center;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.top-tabar {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		background-color: #3486fd;
		height: 320rpx;
		padding: 20rpx;
		position: relative;
	}

	.arrow {
		border-top: 2rpx solid white;
		border-right: 2rpx solid white;
		height: 17rpx;
		width: 17rpx;
		margin-top: 15rpx;
		transform: rotate(225deg);
		flex-shrink: 0;
		z-index: 10;

		/* 添加点击效果 */
		&:active {
			opacity: 0.7;
			transform: rotate(225deg) scale(0.95);
		}
	}

	.placeholder {
		/* width: 20rpx;
		height: 20rpx;
		visibility: hidden; */
	}

.total-con {
		position: relative;
		padding: 20rpx;
		margin-top: -250rpx;
	}
.header {
  text-align: center;
  padding: 40rpx 0;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f0f2f5;
}

.info-list {
  margin-bottom: 10rpx;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  padding: 0 10rpx;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  min-width: 160rpx;
  font-weight: 500;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  font-weight: 500;
}

.status-badge {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.status-badge.processing {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1rpx solid #91d5ff;
}

.status-badge.completed {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1rpx solid #b7eb8f;
}

.status-badge.cancelled {
  background-color: #fff2f0;
  color: #ff4d4f;
  border: 1rpx solid #ffccc7;
}

.status-badge.pending {
  background-color: #fffbe6;
  color: #faad14;
  border: 1rpx solid #ffe58f;
}

.divider {
  height: 2rpx;
  background-color: #f0f0f0;
  margin: 30rpx 0;
}

.photo-section {
  margin-top: 40rpx;
}

.photo-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
  font-weight: 500;
}

.photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 20rpx;
}

.photo-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5;
}

/* 如果没有图片时的占位符 */
.photo-list:empty::after {
  content: '暂无照片';
  color: #999;
  font-size: 28rpx;
  text-align: center;
  width: 100%;
  padding: 60rpx 0;
}

.cancel-btn {
  position: fixed;
  bottom: 40rpx;
  left: 40rpx;
  right: 40rpx;
  height: 88rpx;
  background-color: #fff;
  color: #FF4757;
  border: 2rpx solid #FF4757;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 600;
}

.cancel-btn:active {
  background-color: #fff2f0;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .info-label {
    min-width: auto;
    margin-bottom: 8rpx;
  }
  
  .photo-image {
    width: 180rpx;
    height: 180rpx;
  }
}
</style>